<template>
	<div class="bg_white">
		<h4 class="lhh40 pl20">{{info.group_name}}</h4>
		<div class="images fs0">
		    <img class="previewer-demo-img" v-for="(item, index) in info.group_value" :src="item.src" @click="show(index,$event)">
		</div>
	    <div v-transfer-dom>
	        <previewer :list="allImage" ref="previewer" :options="options">
		        <i class="iconfont prev" slot="button-before" @click="prev()">&#xe633;</i>
		        <i class="iconfont next" slot="button-after" @click="next()">&#xe603;</i>
	        </previewer>

	    </div>
	</div>
</template>

<script>
	import { Previewer, TransferDom } from 'vux'
	import { mapGetters } from 'vuex'
	export default {
		directives: {
		    TransferDom
		},
		components: {
		    Previewer
		},
		computed:{
			...mapGetters('detail',[
				'allImage'
			])
		},
		data () {
			return {
				list: [{
			        src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg',
			        w: 800,
			        h: 400
			      },
			      {
			        src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
			      }, {
			        src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
			      },{
			        src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg'
			    }],
			    options: {
			        getThumbBoundsFn (index) {
			          // find thumbnail element
			          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
			          // get window scroll Y
			          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
			          // optionally get horizontal scroll
			          // get position of element relative to viewport
			          let rect = thumbnail.getBoundingClientRect()
			          // w = width
			          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
			          // Good guide on how to get element coordinates:
			          // http://javascript.info/tutorial/coordinates
			        }
			    }
			}
		},
		methods:{
			show (index,e) {
			   this.$refs.previewer.show(index);
		    },
		    prev(){
		    	this.$refs.previewer.prev()
		    },
		    next(){
		    	this.$refs.previewer.next()
		    }
		},
		props:{
			info:{
				type:Object,
				default:{
					group_name:'外观',
					group_value:[]
				}
			}
		}
		
	}
</script>

<style lang = 'scss' scoped>
	.images {
		img {
			display: inline-block;
			width: 2.72rem;
			height: 1.81333rem;
			margin-left: 0.53333rem;
			margin-bottom: 0.26667rem;
			
		}
	}
	.prev , .next {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
	}
	.prev{
		left: 0.26667rem;
	}
	.next {
		right: 0.26667rem;
	}
</style>